<template>
  <div id="container">
    <input
      type="text"
      v-model="searchKeyword"
      @input="searchPOI"
      placeholder="请输入搜索关键字"
    />
    <div v-for="(poi, index) in poiList" :key="index">
      {{ poi.name }}
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

const searchKeyword = ref("");
const poiList = ref([]);

async function searchPOI() {
  if (!searchKeyword.value) return;

  try {
    const AMap = await AMapLoader.load({
      key: "67399b84761c2d0aed556b4f7f1dd39f", // 替换为你的高德地图API Key
      version: "2.0",
      plugins: ["AMap.PlaceSearch"],
    });

    const placeSearch = new AMap.PlaceSearch({
      map: new AMap.Map("container", {
        zoom: 16,
      }),
    });

    placeSearch.search(searchKeyword.value, (status, result) => {
      if (status === "complete" && result.poiList) {
        poiList.value = result.poiList.pois;
      }
    });
  } catch (e) {
    console.error(e);
  }
}
</script>
